<template>
  <div class="w">
    <div class="header">
      <i class="iconfont icon-fanhui" @click="back"></i>
      <span class="title">公告</span>
    </div>
    <div class="info">
      <div class="info_title">
        <span>{{ noticeList.title }}</span>
      </div>
      <div class="info_text">
        <p>{{ noticeList.text }}</p>
      </div>
      <div class="info_bottom">
        <div class="info_bottom_top">
          <span>{{ noticeList.createUser }}</span>
        </div>
        <div class="info_bottom_bottom">
          <span>{{ createTime }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      noticeId: '',
      noticeList: [],
      createTime: '',
    };
  },

  created() {
    this.noticeId = this.$route.query.noticeId;
    this.getNoticeDetails();
  },

  methods: {
    back() {
      this.$router.go(-1);
    },
    async getNoticeDetails() {
      const { data: res } = await this.$http.get('notice/getById/' + this.noticeId);
      if (res.code == 1) {
        this.noticeList = res.data;
        this.noticeList.createTime = this.noticeList.createTime.split(' ');
        this.createTime = this.noticeList.createTime[0];
        return;
      } else {
        return this.$message.error('信息获取失败');
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.w {
  height: 100vh;
  width: 100%;
  .header {
    background-color: #fece4e;
    height: 50px;
    color: #fff;
    text-align: center;
    position: relative;
    .icon-fanhui {
      position: absolute;
      font-size: 25px;
      line-height: 50px;
      left: 10px;
      font-weight: bold;
    }
    .title {
      font-size: 20px;
      line-height: 50px;
      font-weight: bold;
    }
  }
  .info {
    padding: 20px;
    .info_title {
      text-align: center;
      width: 100%;
      font-size: 30px;
      color: #3c64a0;
      font-weight: bold;
      letter-spacing: 2px;
      margin-top: 25px;
      margin-bottom: 25px;
    }
    .info_text {
      text-indent: 2em;
      font-size: 18px;
      color: #444444;
      letter-spacing: 2px;
      margin-bottom: 25px;
    }
    .info_bottom {
      width: 100%;
      position: relative;
      font-size: 18px;
      letter-spacing: 1px;
      .info_bottom_top {
        position: absolute;
        right: 0;
      }
      .info_bottom_bottom {
        position: absolute;
        right: 0;
        top: 25px;
      }
    }
  }
}
</style>